<template>
  <div>
    <div>
      <el-row>
        <el-col :span="24"><div class="grid-content bg-purple-dark" style="margin-left: 30px;margin-top: 10px"><i class="el-icon-edit el-icon--right"></i>创建工单</div></el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <div style="margin-left: 30%;margin-top: 20px;">
              <el-form ref="form" :model="form" label-width="106px" size="small">
                <div v-for="(item,index) in this.$store.state.creatWorkOrder">
                  <!--单行文本-->
                  <div>
                    <!--必填-->
                    <el-form-item
                      v-if="item.type == '1aa' && item.mustFlag == true"
                      :label=item.name
                      :key="item.id"
                      :prop="'oneText.pro_' + item.id"
                      :rules="[{required: true, message: item.name + '不能为空', trigger: 'blur'},{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊字符' }]"
                    >
                      <el-input v-model="form.oneText['pro_'+item.id]"></el-input>
                    </el-form-item>
                    <!--不是必填-->
                    <el-form-item
                      v-if="item.type == '1aa' && item.mustFlag == false"
                      :label=item.name
                      :key="item.id"
                      :prop="'oneText.pro_' + item.id"
                      :rules="[{trigger: 'blur'},{ pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+$/, message: '不允许输入空格等特殊字符' }]"
                    >
                      <el-input v-model="form.oneText['pro_'+item.id]"></el-input>
                    </el-form-item>
                  </div>
                  <!--多行文本-->
                  <div>
                    <!--必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ab' && item.mustFlag == true"
                      :key="item.id"
                      :prop="'oneText.pro_' + item.id"
                      :rules="{required: true, message: item.name + '不能为空', trigger: 'blur'}"
                    >
                      <el-input v-model="form.oneText['pro_'+item.id]" type="textarea" :rows="2"></el-input>
                    </el-form-item>
                    <!--不是必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ab' && item.mustFlag == false"
                    >
                      <el-input v-model="form.oneText['pro_'+item.id]" type="textarea" :rows="2"></el-input>
                    </el-form-item>
                  </div>
                  <!--小数-->
                  <div>
                    <!--必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ac' && item.mustFlag == true"
                      :key="item.id"
                      :prop="'oneText.pro_' + item.id"
                      :rules="[{required: true, message: item.name + '不能为空', trigger: 'blur'},{ pattern: /^([0-9]{1,}[.][0-9]*)$/, message: '请输入小数' }]"
                    >
                      <el-input v-model="form.oneText['pro_'+item.id]"></el-input>
                    </el-form-item>
                    <!--不是必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ac' && item.mustFlag == false"
                      :key="item.id"
                      :prop="'oneText.pro_' + item.id"
                      :rules="[{trigger: 'blur'},{ pattern: /^([0-9]{1,}[.][0-9]*)$/, message: '请输入小数' }]"
                    >
                      <el-input v-model="form.oneText['pro_'+item.id]"></el-input>
                    </el-form-item>
                  </div>
                  <!--整数-->
                  <div>
                    <!--必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ad' && item.mustFlag == true"
                      :key="item.id"
                      :prop="'oneText.pro_' + item.id"
                      :rules="[{required: true, message: item.name + '不能为空', trigger: 'blur'},{ pattern: /^([0-9]{1,})$/, message: '请输入整数' }]"
                    >
                      <el-input v-model="form.oneText['pro_'+item.id]"></el-input>
                    </el-form-item>
                    <!--不是必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ad' && item.mustFlag == false"
                      :key="item.id"
                      :prop="'oneText.pro_' + item.id"
                      :rules="[{trigger: 'blur'},{ pattern: /^([0-9]{1,})$/, message: '请输入整数' }]"
                    >
                      <el-input v-model="form.oneText['pro_'+item.id]"></el-input>
                    </el-form-item>
                  </div>
                  <!--日期-->
                  <div>
                    <!--必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ae' && item.mustFlag == true"
                      :key="item.id"
                      :prop="'oneText.pro_' + item.id"
                      :rules="{required: true, message: item.name + '不能为空', trigger: 'blur'}"
                    >
                      <el-date-picker
                        v-model="form.oneText['pro_'+item.id]"
                        type="date"
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                    <!--不是必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ae' && item.mustFlag == false"
                    >
                      <el-date-picker
                        v-model="form.oneText['pro_'+item.id]"
                        type="date"
                        placeholder="选择日期">
                      </el-date-picker>
                    </el-form-item>
                  </div>

                  <!--附件--暂时先不做-->
                  <!--<div>-->
                  <!--<el-form-item :label=item.name v-if="item.type == '1af'">-->
                  <!--<el-upload-->
                  <!--class="upload-demo"-->
                  <!--action="https://jsonplaceholder.typicode.com/posts/"-->
                  <!--:on-preview="handlePreview"-->
                  <!--:on-remove="handleRemove"-->
                  <!--:before-remove="beforeRemove"-->
                  <!--multiple-->
                  <!--:limit="3"-->
                  <!--:on-exceed="handleExceed"-->
                  <!--:file-list="fileList">-->
                  <!--<el-button size="small" type="primary">点击上传</el-button>-->
                  <!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                  <!--</el-upload>-->
                  <!--</el-form-item>-->
                  <!--</div>-->

                  <!--下拉菜单-->
                  <div>
                    <!--必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ag' && item.mustFlag == true"
                      :key="item.id"
                      :prop="'orderDrop.pro_' + item.id"
                      :rules="{ required: true, message: '请选择' + item.name, trigger: 'change'}"
                    >
                      <el-select v-model="form.orderDrop['pro_'+item.id]" value-key="value" placeholder="请选择">
                        <el-option
                          v-for="itemc in item.detail"
                          :key="itemc.value"
                          :label="itemc.name"
                          :value="itemc">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <!--不是必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ag' && item.mustFlag == false"
                    >
                      <el-select v-model="form.orderDrop['pro_'+item.id]" value-key="value" placeholder="请选择">
                        <el-option
                          v-for="itemc in item.detail"
                          :key="itemc.value"
                          :label="itemc.name"
                          :value="itemc">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <!--用户-->
                  <div>
                    <!--必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1aj' && item.mustFlag == true"
                      :key="item.id"
                      :prop="'userOrderDrop.pro_' + item.id"
                      :rules="{ required: true, message: '请选择' + item.name, trigger: 'change'}"
                    >
                      <el-select v-model="form.userOrderDrop['pro_'+item.id]" value-key="id" placeholder="请选择">
                        <el-option
                          v-for="itemd in item.detail"
                          :key="itemd.id"
                          :label="itemd.name"
                          :value="itemd">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <!--不是必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1aj' && item.mustFlag == false"
                    >
                      <el-select v-model="form.userOrderDrop['pro_'+item.id]" value-key="id" placeholder="请选择">
                        <el-option
                          v-for="itemd in item.detail"
                          :key="itemd.id"
                          :label="itemd.name"
                          :value="itemd">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <!--引用-->
                  <div>
                    <!--必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1al' && item.mustFlag == true"
                      :key="item.id"
                      :prop="'citeOrderDrop.pro_' + item.id"
                      :rules="{ required: true, message: '请选择' + item.name, trigger: 'change'}"
                    >
                      <el-select v-model="form.citeOrderDrop['pro_'+item.id]" value-key="id" placeholder="请选择">
                        <el-option
                          v-for="iteme in item.detail"
                          :key="iteme.id"
                          :label="iteme.name"
                          :value="iteme">
                        </el-option>
                      </el-select>
                    </el-form-item>
                    <!--不是必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1al' && item.mustFlag == false"
                    >
                      <el-select v-model="form.citeOrderDrop['pro_'+item.id]" value-key="id" placeholder="请选择">
                        <el-option
                          v-for="iteme in item.detail"
                          :key="iteme.id"
                          :label="iteme.name"
                          :value="iteme">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                  <!--单选框-->
                  <div>
                    <!--必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ah' && item.mustFlag == true"
                      :key="item.id"
                      :prop="'radio.pro_' + item.id"
                      :rules="{ required: true, message: '请选择' + item.name, trigger: 'change' }"
                    >
                      <el-radio-group v-model="form.radio['pro_'+item.id]">
                        <el-radio v-for="itemlocal in item.detail" :key="itemlocal.value" :label="itemlocal">{{itemlocal.name}}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <!--不是必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ah' && item.mustFlag == false"
                    >
                      <el-radio-group v-model="form.radio['pro_'+item.id]">
                        <el-radio v-for="itemlocal in item.detail" :key="itemlocal.value" :label="itemlocal">{{itemlocal.name}}</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </div>
                  <!--多选框-->
                  <div>
                    <!--必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ai' && item.mustFlag == true"
                      :key="item.id"
                      :prop="'checkList'"
                      :rules="{ type: 'array', required: true, message: '请至少选择一个' + item.name, trigger: 'change' }"
                    >
                      <el-checkbox-group v-model="form.checkList" @change="handleChange(item.id)">
                        <el-checkbox v-for="itemlocal in item.detail" :key="itemlocal.value" :label="itemlocal">{{itemlocal.name}}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                    <!--不是必填-->
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ai' && item.mustFlag == false"
                    >
                      <el-checkbox-group v-model="form.checkList" @change="handleChange(item.id)">
                        <el-checkbox v-for="itemlocal in item.detail" :key="itemlocal.value" :label="itemlocal">{{itemlocal.name}}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </div>
                  <!--表格-->
                  <div>
                    <el-form-item
                      :label=item.name
                      v-if="item.type == '1ak'"
                    >
                      <el-button type="primary" size="mini" icon="el-icon-plus" @click="dialogVisible = true;addbutton(item);initialize(item.id)" style="margin-bottom: 5px">添加{{item.name}}</el-button>
                      <el-table
                        :data="form.tableData['pro_'+item.id]"
                        border
                        size="small"
                        style="width: 100%">
                        <el-table-column
                          prop="name"
                          :label="item.detail[0].name"
                          show-overflow-tooltip
                          width="60">
                        </el-table-column>
                        <el-table-column
                          prop="phone"
                          :label="item.detail[1].name"
                          show-overflow-tooltip
                          width="100">
                        </el-table-column>
                        <el-table-column label="操作">
                          <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" circle @click="handleDelete(scope.$index, scope.row,item.id)"></el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                    </el-form-item>
                  </div>
                  <!--与后台联动按钮--暂时先不做-->
                  <!--<div>-->
                  <!--<el-form-item :label=item.name v-if="item.type == '1am'">-->
                  <!--<el-button type="primary">{{item.value1}}</el-button>-->
                  <!--<el-button type="primary">{{item.value2}}</el-button>-->
                  <!--</el-form-item>-->
                  <!--</div>-->
                </div>
                <!--本地固定按钮-->
                <el-form-item>
                  <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
                  <el-button @click="resetForm('form')">重置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light">
            <div style="height: 300px;margin-top: 15%;margin-left: 40%">
              <el-steps direction="vertical" :active=parseInt(this.$store.state.step) size="small">
                <el-step title="选择属性类型"></el-step>
                <el-step title="创建工单"></el-step>
                <el-step title="完成创建" description=""></el-step>
              </el-steps>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-dialog
        size="mini"
        title="添加"
        :visible.sync="dialogVisible"
        width="30%">
        <div>
          <el-form ref="form" :model="form" label-width="70px" size="mini">
            <el-form-item :label=form.laboel.name1>
              <el-input v-model="form.contactUser"></el-input>
            </el-form-item>
            <el-form-item :label=form.laboel.name2>
              <el-input v-model="form.contactPhone"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
          <el-button type="primary" @click="tableAdd();dialogVisible = false" size="mini">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import QS from 'qs';
  import axios from 'axios';
  import { mapState } from 'vuex';



  export default {
    name: "orderBuild",
    computed: {
      ...mapState([
        'workOrderTypeList',
        'creatWorkOrder',
        'creatTableData',
      ]),
    },
    data() {
      return {
        dialogVisible: false,
        form: {
          oneText: {},
          orderDate: [],
          orderDrop: {},
          userOrderDrop: {},
          citeOrderDrop: {},
          radio: {},
          checkList: [],
          checkboxId: '',
          contactUser: '',
          contactPhone: '',
          laboel: {},
          dropDown: {},
          tableData: {},
        },
        formSubmit: {
          name: '',
          modelId: '',
          modelPid: '',
          workflowId: '',
          caseId: '',
          state: '1t1',
          proData: '',
          selectProData: '',
          userProData: '',
          resProData: '',
          radioProData: '',
          checkboxProData: '',
          tableProData: '',
        },
        productGroupRules: {
          productGroupNum: [{required: true, message: '请填写商品数量', trigger: 'blur'}],
          productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}]
        }
      }
    },
    methods:{
      //添加联系人与表格方法
      addbutton(item){
        var that = this;
        var alertData = {};
        alertData.name1 = item.detail[0].name;
        alertData.name2 = item.detail[1].name;
        alertData.id = item.id;
        that.form.laboel = alertData;
        console.log("274"+JSON.stringify(that.form.laboel));
      },
      //保存联系人与表格数据
      tableAdd(){
        var that = this;
        var itemData = {};
        itemData.name = that.form.contactUser;
        itemData.phone = that.form.contactPhone;
        var proid = "pro_"+that.form.laboel.id;
        console.log("208"+proid);
        that.form.tableData[proid].push(itemData);
        that.form.contactUser = '';
        that.form.contactPhone = '';
        console.log("285"+JSON.stringify(that.form.tableData))
      },
      //删除表格行
      handleDelete(index,row,id) {
        var proid = "pro_"+id;
        this.form.tableData[proid].splice(index, 1);
      },
      //初始化表格数据
      initialize(id){
        var that = this;
        var proid = "pro_"+id;
        if (that.form.tableData[proid] == null) {
          that.form.tableData[proid] = [];
        };
        console.log("307"+JSON.stringify(that.form.tableData));
      },
      //初始化下拉菜单数据
      initializeDrop(id,item){
        var that = this;
        var proid = ("pro_"+id);
        var dropData = item.detail;
        if (that.form.dropDown[proid] == null) {
          that.form.dropDown[proid] = dropData;
        };
        console.log("314"+proid);
        console.log("315"+JSON.stringify(that.form.dropDown));
      },
      //从html中取到ID并付给checkboxId
      handleChange(id){
        var that = this;
        that.form.checkboxId = 'pro_'+id;
      },
      //创建工单
      submitForm(formName) {
        var that = this;
        that.$refs[formName].validate((valid) => {
          if (valid) {
            that.formSubmit.name = that.$store.state.creatWorkOrder[0].caseId;
            that.formSubmit.modelId = that.$store.state.creatWorkOrder[0].modolId;
            that.formSubmit.workflowId = that.$store.state.creatWorkOrder[0].workflowId;
            that.formSubmit.modelPid = that.$store.state.creatWorkOrder[0].modelPid;
            that.formSubmit.caseId = that.$store.state.creatWorkOrder[0].caseId;
            that.formSubmit.proData = JSON.stringify(that.form.oneText);
            that.formSubmit.selectProData = JSON.stringify(that.form.orderDrop);
            that.formSubmit.userProData = JSON.stringify(that.form.userOrderDrop);
            that.formSubmit.resProData = JSON.stringify(that.form.citeOrderDrop);
            that.formSubmit.radioProData = JSON.stringify(that.form.radio);
            var checkbox1 = {};
            checkbox1[that.form.checkboxId] = that.form.checkList;
            that.formSubmit.checkboxProData = JSON.stringify(checkbox1);
            that.formSubmit.tableProData = JSON.stringify(that.form.tableData);
            axios.post('/api/case/addCaseWorklist',QS.stringify(that.formSubmit))
              .then(function (data) {
                var selfData = data.data;
                if (selfData.code == 200){
                  that.$store.commit('changeStep2');
                  alert("添加成功！");
                  that.$router.push({ path: '/myWorkOrder/thisWorkOrder'});
                }
                else{
                  alert('错误代码:' + selfData.code + '请联系系统管理员！');
                };
              });
            console.log("348"+JSON.stringify(that.form.checkboxId));
            console.log("318"+JSON.stringify(that.formSubmit));
            // console.log("317"+JSON.stringify(that.$store.state.creatWorkOrder));
            console.log("316"+JSON.stringify(that.form));
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      //重置创建工单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    },
  }
</script>

<style scoped>

</style>
